<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
           <meta name="author" content="Zhang Cheng">
		<title></title>
		<script src="js/vue.js" ></script>
	</head>
	<body>
		<!--在被Vue 控制的#app 外面 使用#template 元素，定义页面的html结构-->
		<template id="template1">
			<div>
			<h1>这是在app外通过template定义的组件</h1>
			<span>
				123
			</span>
			</div>
		</template>
		
		
		<div id="app">
			<!--
            	如果要使用组件，直接将组件的名称以 html标签的形式引入到html页面中即可
            -->
            <my-Component></my-Component>
            <my-Component2></my-Component2>
            <my-Component3></my-Component3>
            <my-Component4></my-Component4>
		</div>
		<script>
			//什么是组件？ 组件的出现就是为了拆分Vue实例的代码量的，让我们以组件的形式划分 不同的功能模块，将来我们需要什么样的功能就可以去调用相应的组件
			//组件和模块化的区别：
			//模块化是从代码逻辑的角度进行划分的；方便代码分层，保证每个功能单一
			//组件化是从UI界面的角度进行划分的；方便UI组件的重用
			//使用Vue.extends定义全局组件
			
			var com1 = Vue.extend({
				template:'<h3>这是使用Vue.extend 定义的组件</h3>'//通过template来指向页面要展示的html结构
			})
			//使用Vue.component('组件的名称'，组件创建出来的魔板对象)
			//使用Vue.component 注册的组件如果使用了驼峰命名法，在html里渲染的时候就要用 - 将驼峰之前的内容分割开
			Vue.component('myComponent',com1);
			
			//使用Vue.component直接定义组件 第一个参数，组件的名称，第二个参数，Vue.extend创建的组件，template是将来组件需要渲染的模板
			
			
			Vue.component('myComponent2',
				Vue.extend({
					//无论是哪种方式定义的组件，template 指向的模板类容必须有且只有唯一的一个根元素
					template:'<div><h5>这是直接使用在 Vue.component中定义的组件</h5><span>123</span></div>'
				}))
			Vue.component('myComponent3',{
				template:'<h2>这是直接使用字面量对象创建的组件</h2>'
			})
			
			Vue.component('myComponent4',{
				template:'#template1'
			})
			
			
			var app = new Vue({
				el:'#app',
				data:{

				},
				methods:{
					
				}
			});
		</script>
	</body>
</html>